<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>快捷支付</title>
    <link rel="stylesheet" href="css/weui.css">
    <link rel="stylesheet" href="css/myKeyBoard.css">
    <script src="js/weui.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
</head>
<body ontouchstart>
<div class="container" id="container" v-cloak>
    <div class="page input js_show">
        <div class="page__bd">
            <div class="weui-form-preview" style="background-color: rgb(248,248,248)">
                <div class="weui-form-preview__hd">
                    <div class="weui-form-preview__item">
                        <div style="text-align: center;line-height: initial;color: #666666;padding: 20px 0">
                            本次交易需要短信确认，验证码已发送至您手机<br/>150******32
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="box">
            <label @click="showKeyBoard">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </label>
        </div>

        <!--虚拟键盘-->
        <div class="my_keyboard_hidden">
            <div style="width: 100%;text-align: center;border-top: 1px solid #CECDCE;height: 25px;background-color: #FFFFFF" @click="close">
                <span style="vertical-align: sub">﹀</span>
            </div>
            <table border="0" cellpadding="0" cellspacing="0" id="table_0909099">
                <tbody>
                <tr>
                    <td @touchstart="numberClick($event)" @touchend="styleEnd($event)">1</td>
                    <td @touchstart="numberClick($event)" @touchend="styleEnd($event)">2</td>
                    <td @touchstart="numberClick($event)" @touchend="styleEnd($event)">3</td>
                </tr>
                <tr>
                    <td @touchstart="numberClick($event)" @touchend="styleEnd($event)">4</td>
                    <td @touchstart="numberClick($event)" @touchend="styleEnd($event)">5</td>
                    <td @touchstart="numberClick($event)" @touchend="styleEnd($event)">6</td>
                </tr>
                <tr>
                    <td @touchstart="numberClick($event)" @touchend="styleEnd($event)">7</td>
                    <td @touchstart="numberClick($event)" @touchend="styleEnd($event)">8</td>
                    <td @touchstart="numberClick($event)" @touchend="styleEnd($event)">9</td>
                </tr>
                <tr>
                    <td @touchstart="numberClick($event)" @touchend="styleEnd($event)">.</td>
                    <td @touchstart="numberClick($event)" @touchend="styleEnd($event)">0</td>
                    <td @touchstart="numberClick($event)" @touchend="styleEnd($event)">删除</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="js/index.js"></script>
</body>
</html>